<template>
   <view class="nav-wrap">
      <view class="nav-title">
         <image class="logo" src="https://h5.uvui.cn/static/uvui/common/logo.png" />
         <view class="nav-info">
            <view class="nav-info__title">
               <text class="nav-info__title__text">uvui-ts {{ version }}</text>
            </view>
            <text class="nav-slogan">多平台快速开发的UI框架</text>
         </view>
      </view>
      <text class="nav-desc">
         uvui-ts 破釜沉舟之兼容nvue、app、h5、小程序等多端基于uni-app的生态框架，开箱即用，利剑出击
      </text>
   </view>
</template>

<script setup lang="ts">
defineOptions({ name: 'page-nav', option: { virtualHost: true } });
const version = uni.$uv.config.v;
</script>

<style lang="scss" scoped>
.nav-wrap {
   padding: 15px;
   position: relative;
}

.theme-switch {
   position: absolute;
   top: 15px;
   right: 15px;
}

.nav-title {
   /* #ifndef APP-NVUE */
   display: flex;
   /* #endif */
   flex-direction: row;
   align-items: center;
   justify-content: flex-start;
}

.nav-info {
   margin-left: 15px;

   &__title {
      /* #ifndef APP-NVUE */
      display: flex;
      /* #endif */
      flex-direction: row;
      align-items: center;

      &__text {
         /* #ifndef APP-NVUE */
         display: flex;
         /* #endif */
         color: $uv-main-color;
         font-size: 25px;
         font-weight: bold;
         text-align: left;
      }

      &__jump {
         font-size: 12px;
         color: $uv-primary;
         font-weight: normal;
         margin-left: 20px;
      }
   }
}

.logo {
   width: 70px;
   height: 70px;
}

.nav-slogan {
   color: $uv-tips-color;
   font-size: 14px;
}

.nav-desc {
   display: block;
   margin-top: 20rpx;
   font-size: 14px;
   color: $uv-content-color;
   line-height: 20px;
}
</style>
